<template>
	<view class="template-create tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="true">
			设置
		</tn-nav-bar>


		<view class="tn-safe-area-inset-bottom " :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<view class="about-shadow  tn-margin">
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">昵称</view>
						<view class="tn-color-gray " @click="nameshow=true;nickname=body.nickname">
							<text>{{body.nickname}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>

				<tn-popup v-model="nameshow" width="80%" height="300rpx" mode="center" :borderRadius="30" :closeBtn="false"
					:maskCloseable="true">
					<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
						<input placeholder="请填写昵称" name="input" maxlength="10" v-model="nickname"
							placeholder-style="color:#AAAAAA"></input>
					</view>
					<view class="tn-flex ">
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button :blockRepeatClick="true" @click="savename"
								backgroundColor="tn-main-gradient-purple" padding="40rpx 0" width="60%" shadow fontBold>
								<text class="tn-icon-edit tn-padding-right-xs "></text>
								<text class="">完成</text>
							</tn-button>
						</view>
					</view>
				</tn-popup>

				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" >
					<picker mode="date" :value="date" :start="startDate" :end="endDate"
						@change="bindDateChange">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;" >
						<view class="tn-margin-left-sm">出生日期</view>
						<view class="tn-color-gray ">
							
								<view class="uni-input">{{date}}<text class="tn-icon-right"></text></view>
							
						</view>
					</view>
					</picker>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="sexshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">性别</view>
						<view class="tn-color-gray " >
							<tn-select v-model="sexshow" mode="single" :list="sexlist"
								@confirm="confirmsex"></tn-select>
							<text>{{body.sex}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="shengaoshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">身高</view>
						<view class="tn-color-gray " >
							<tn-select v-model="shengaoshow" mode="single" :list="shengaolist"
								@confirm="shengaopass"></tn-select>
							<text>{{body.shengao}}cm</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="tzshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">体重</view>
						<view class="tn-color-gray " >
							<tn-select v-model="tzshow" mode="single" :list="tizhonglist"
								@confirm="tizhongpass"></tn-select>
							<text>{{body.tizhong}}kg</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="hunshow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">婚姻状况</view>
						<view class="tn-color-gray " >
							<tn-select v-model="hunshow" mode="single" :list="hunlist"
								@confirm="confirmhun"></tn-select>
							<text>{{body.hun}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				
			<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="carshow=true">
				<view class="tn-flex tn-flex-row-between" style="width: 100%;">
					<view class="tn-margin-left-sm">车辆</view>
					<view class="tn-color-gray " >
						<tn-select v-model="carshow" mode="single" :list="carlist"
							@confirm="confirmcar"></tn-select>
						<text>{{body.car}}</text>
						<text class="tn-icon-right"></text>
					</view>
				</view>
			</tn-list-cell>
			
			<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="homeshow=true">
				<view class="tn-flex tn-flex-row-between" style="width: 100%;">
					<view class="tn-margin-left-sm">住房</view>
					<view class="tn-color-gray " >
						<tn-select v-model="homeshow" mode="single" :list="homelist"
							@confirm="confirmhome"></tn-select>
						<text>{{body.home}}</text>
						<text class="tn-icon-right"></text>
					</view>
				</view>
			</tn-list-cell>	
				
				
				
				
				
				
				
					<tn-list-cell :unlined="true" :radius="true" :fontSize="30" >
									<view class="tn-flex tn-flex-row-between" style="width: 100%;">
										<view class="tn-margin-left-sm">居住地</view>
										<view class="tn-color-gray ">
											<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
												{{body.new_city}} <text class="" v-if="!body.new_city">点击设置</text>
											</pick-regions>
										</view>
									</view>
								</tn-list-cell>
								<tn-list-cell :unlined="true" :radius="true" :fontSize="30" >
									<view class="tn-flex tn-flex-row-between" style="width: 100%;">
										<view class="tn-margin-left-sm">家乡</view>
										<view class="tn-color-gray ">
											<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegionold">
												{{body.old_city}} <text class="" v-if="!body.old_city">点击设置</text>
											</pick-regions>
				
										</view>
									</view>
								</tn-list-cell>
				
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="xuelishow=true" v-if="body.is_school==0">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">学历</view>
						<view class="tn-color-gray " >							
							<tn-select v-model="xuelishow" mode="single" :list="xuelilist"
								@confirm="confirmxueli"></tn-select>								
							<text>{{body.xueli}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>		
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="msg('已认证不可修改');" v-if="body.is_school==1">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">学历</view>
						<view class="tn-color-gray " >							
							<tn-select v-model="xuelishow" mode="single" :list="xuelilist"
								@confirm="confirmxueli"></tn-select>								
							<text>{{body.xueli}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>		
				
				
				

				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="xuexiaoshow=true;">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">毕业院校</view>
						<view class="tn-color-gray " @click="xuexiaoshow=true;">
							<text>{{body.xuexiao}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>

				<tn-popup v-model="xuexiaoshow" width="80%"  mode="center" :borderRadius="30" :closeBtn="false"
					:maskCloseable="true">
					<block v-if="body.is_school">
						<view class="tn-flex ">
							<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							已认证，不可修改
							</view>
						</view>
					</block>
					<block v-else>
					<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
						<input placeholder="请填写毕业学校" name="input" maxlength="50" v-model="xuexiao"
							placeholder-style="color:#AAAAAA"></input>
					</view>
					<view class="tn-flex ">
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button :blockRepeatClick="true" @click="savexuexiao"
								backgroundColor="tn-main-gradient-purple" padding="40rpx 0" width="60%" shadow fontBold>
								<text class="tn-icon-edit tn-padding-right-xs "></text>
								<text class="">完成</text>
							</tn-button>
						</view>
					</view>
					</block>
					
					
				</tn-popup>	
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="zhiweishow=true;">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">职位</view>
						<view class="tn-color-gray " >
							<text>{{body.zhiwei}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>
				
				<tn-popup v-model="zhiweishow" width="80%"  mode="center" :borderRadius="30" :closeBtn="false"
					:maskCloseable="true">
					<block v-if="body.is_work">
						<view class="tn-flex ">
							<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							已认证，不可修改
							</view>
						</view>
					</block>
					<block v-else>
					<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
						<input placeholder="请填写职位" name="input" maxlength="20" v-model="zhiwei"
							placeholder-style="color:#AAAAAA"></input>
					</view>
					<view class="tn-flex ">
						<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
							<tn-button :blockRepeatClick="true" @click="savezhiwei"
								backgroundColor="tn-main-gradient-purple" padding="40rpx 0" width="60%" shadow fontBold>
								<text class="tn-icon-edit tn-padding-right-xs "></text>
								<text class="">完成</text>
							</tn-button>
						</view>
					</view>
					</block>
				</tn-popup>	
				<tn-list-cell :unlined="true" :radius="true" :fontSize="30" @click="shourushow=true">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-margin-left-sm">年收入</view>
						<view class="tn-color-gray " >
							<tn-select v-model="shourushow" mode="single" :list="shourulist"
								@confirm="confirmshouru"></tn-select>
							<text>{{body.shouru}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</tn-list-cell>									
									
									
									
									
			</view>

		</view>



	</view>
</template>

<script>
import pickRegions from "@/components/pick-regions/pick-regions.vue";
import { host } from "@/siteinfo.js";
import getTel from "@/components/loginFn/get-tel";
import silenceUpdate from "@/uni_modules/rt-uni-update/js_sdk/silence-update.js"; //引入静默更新
export default {
  components: {
    getTel,
    pickRegions,
  },
  data() {
    return {
      xuexiao: "",
      xuexiaoshow: false,
      zhiwei: "",
      zhiweishow: false,
      defaultRegion: ["陕西省", "商洛市", "洛南县"],

      carshow: false,
      car: "不限制",
      carlist: [
        {
          value: "1",
          label: "已买车",
        },
        {
          value: "2",
          label: "未买车",
        },
      ],

      homeshow: false,
      home: "不限制",
      homelist: [
        {
          value: "1",
          label: "租房",
        },
        {
          value: "2",
          label: "已买房",
        },
        {
          value: "3",
          label: "和父母同住",
        },
        {
          value: "4",
          label: "婚后买房",
        },
      ],

      defaultRegionCode: "611021",
      tzshow: false,
      tizhonglist: [],
      shengaoshow: false,
      shengaolist: [],
      sexshow: false,
      sexlist: [
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],
      hunshow: false,
      hunlist: [
        {
          value: "1",
          label: "未婚",
        },
        {
          value: "2",
          label: "离异",
        },
        {
          value: "3",
          label: "丧偶",
        },
      ],
      xuelishow: false,
      xuelilist: [
        {
          label: "高中及以下",
        },
        {
          label: "专科",
        },
        {
          label: "本科",
        },
        {
          label: "硕士",
        },
        {
          label: "博士",
        },
      ],
      shourushow: false,
      shourulist: [
        {
          label: "5万以下",
        },
        {
          label: "5-8万",
        },
        {
          label: "8-10万",
        },
        {
          label: "10-15万",
        },
        {
          label: "15-20万",
        },
        {
          label: "20-30万",
        },
        {
          label: "30-50万",
        },
        {
          label: "50万以上",
        },
      ],
      date: "请选择生日",
      nickname: "",
      nameshow: false,
      currentSize: 0,
      news: [],
      body: [],
      giftianchu: false,
    };
  },
  computed: {
    startDate() {
      return "1965-01-01";
    },
    endDate() {
      return "2005-01-01";
    },
  },
  onLoad(option) {
    let that = this;
    that.info();

    for (let i = 140; i < 220; i++) {
      let zhi = {
        value: i,
        label: i + "cm",
      };
      this.shengaolist.push(zhi);
    }

    for (let i = 40; i < 120; i++) {
      let zhi = {
        value: i,
        label: i + "kg",
      };
      this.tizhonglist.push(zhi);
    }
  },
  methods: {
    handleGetRegion(region) {
      let new_city = region[0].name + "-" + region[1].name;
      this.xiugai("new_city", new_city);
    },
    handleGetRegionold(region) {
      let new_city = region[0].name + "-" + region[1].name;
      this.xiugai("old_city", new_city);
    },

    shengaopass(e) {
      this.shengaoshow = false;
      this.xiugai("shengao", e[0].value);
    },

    confirmshouru(e) {
      this.shourushow = false;
      this.xiugai("shouru", e[0].label);
    },
    tizhongpass(e) {
      this.tzshow = false;
      this.xiugai("tizhong", e[0].value);
    },
    confirmsex(e) {
      this.sexshow = false;
      this.xiugai("sex", e[0].value);
    },
    confirmhun(e) {
      this.hunshow = false;
      this.xiugai("hun", e[0].label);
    },

    confirmcar(e) {
      this.carshow = false;
      this.xiugai("car", e[0].label);
    },
    confirmhome(e) {
      this.homeshow = false;
      this.xiugai("home", e[0].label);
    },

    confirmxueli(e) {
      this.xuelishow = false;
      this.xiugai("xueli", e[0].label);
    },
    gaisex() {
      if (this.body.sfz_name) {
        this.msg("你已认证，不能修改");
        return;
      }
      this.sexshow = true;
    },

    bindDateChange: function (e) {
      this.date = e.detail.value;
      this.xiugai("shengri", e.detail.value);
    },
    savename() {
      this.nameshow = false;
      this.body.nickname = this.nickname;
      this.xiugai("nickname", this.nickname);
    },
    savexuexiao() {
      this.xuexiaoshow = false;
      this.xiugai("xuexiao", this.xuexiao);
    },
    savezhiwei() {
      this.zhiweishow = false;
      this.xiugai("zhiwei", this.zhiwei);
    },
    savexuexiao() {
      this.xuexiaoshow = false;
      this.xiugai("xuexiao", this.xuexiao);
    },
    closeGetTelModalFn() {
      this.showGetTelModal = false;
    },

    async info() {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/api/index/GetUserinfo",
        data: {
          user_id: uni.getStorageSync("user_id"),
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.body = result.data.data;
          that.date = that.body.shengrizhi;
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    async xiugai(name, body) {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/api/user/set_passmore?name=" + name + "&body=" + body,
        data: {},
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.msg("设置成功");
          this.info();
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.template-edit {
}

/* 用户头像 start */
.logo-image {
  width: 210rpx;
  height: 210rpx;
  position: relative;
}

.about-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 50rpx 50rpx 50rpx rgba(0, 0, 0, 0.07);
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border: 8rpx solid rgba(255, 255, 255, 0.05);
  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  overflow: hidden;
  // background-color: #FFFFFF;
}

.bg-flex-shadow {
  background-color: #00c3ff;
  z-index: 9999;
}

/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #ffffff;
  }
}

/* 底部悬浮按钮 start*/
.tn-tabbar-height {
  min-height: 100rpx;
  height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}

.tn-footerfixed {
  position: fixed;
  width: 100%;
  bottom: calc(30rpx + env(safe-area-inset-bottom));
  z-index: 1024;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
}

/* 底部悬浮按钮 end*/

/* 标签内容 start*/
.tn-tag-content {
  &__item {
    display: inline-block;
    line-height: 45rpx;
    padding: 10rpx 30rpx;
    margin: 20rpx 20rpx 5rpx 0rpx;

    &--prefix {
      padding-right: 10rpx;
    }
  }
}

.tn-shadow-blurddd {
  border: 2px solid black;
}

.list {
  &__left {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    &__icon,
    &__image {
      margin-right: 18rpx;
    }
  }

  &__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.list-icon-text,
.list-image-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-image-text {
  .list {
    &__left {
      &__image {
        width: 20rpx;
        height: 20rpx;
      }
    }
  }
}

/* 标签内容 end*/
</style>